<template>
  <div class="simple-button">
    <el-button
      :style="{height: `${bottonSize[type].height}px`, fontSize: `${bottonSize[type].fontSize}px`, background: `${bottonColor[colorType].bg}`, color: `${bottonColor[colorType].fontColor}`}"
      type="primary"
      class="btn-operate btn-simple"
      @click="toClick">
      <div class="center">
        <span :style="{marginRight: `${icon !== '' ? 4 : 0}px`}" class="name">{{ name }}</span>
        <i v-if="icon !== ''" :class="icon" :style="{fontSize: `${bottonSize[type].fontSize}px`}" />
        <!-- <svg-icon v-if="icon === ''" icon-class="createOrder" style="width: 16px;height:16px"/> -->
      </div>
    </el-button>
  </div>
</template>
<script>
const BTNSIZE = {
  'small': {
    'height': 32,
    'fontSize': 14
  },
  'medium': {
    'height': 40,
    'fontSize': 16
  }
};
const BTNCOLOR = {
  'default': {
    'bg': '#EFF3FB',
    'fontColor': '#406EFF'
  },
  'deep': {
    'bg': '#406EFF',
    'fontColor': '#fff'
  }
};
export default {
  name: 'SimpleButton',
  props: {
    name: {
      type: String,
      default: () => {
        return '';
      }
    },
    type: {
      type: String,
      default: 'small'
    },
    colorType: {
      type: String,
      default: 'default'
    },
    icon: {
      type: String,
      default: () => {
        return '';
      }
    }
  },
  data() {
    return {
      bottonSize: BTNSIZE,
      bottonColor: BTNCOLOR
    };
  },
  methods: {
    toClick() {
      this.$emit('click');
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.simple-button {
  .btn-simple {
    border: none;
    font-weight:500;
    padding: 0 18px;
  }
  .center {
    display: flex;
    align-items: center;
  }
}
</style>
